/// 样式 * 主界面 * 页签栏

import { css } from '@emotion/css'

export const pagebarCSS = css`
  height: 32px;
  border-bottom: 1px solid #fff;
  user-select: none;

  > .pagebar-tabs {
    height: 100%;
    background: transparent;

    > .ant-tabs-nav {
      height: 100%;
      margin-bottom: 0;

      /* 页签列 */
      > .ant-tabs-nav-wrap > .ant-tabs-nav-list {
        > .ant-tabs-tab {
          ${flex()}
          padding: 0;
          color: #ccc;
          border: 0;
          border-right: 1px solid rgba(255,255,255,0.6);
          border-radius: 0;
          background: transparent;

          &.ant-tabs-tab-with-remove > .ant-tabs-tab-btn > .label {
            padding-right: 36px;
          }

          > .ant-tabs-tab-btn {
            ${wh()}
            color: #6E7C94;

            &:active {
              color: #268CFF;
            }
            &:focus {
              color: #4993FF;
            }

            > .label {
              ${flex()}
              ${wh()}
              padding-left: 12px;
              padding-right: 12px;
            }
          }
          > .ant-tabs-tab-remove {
            position: absolute;
            right: 8px;
            margin: 0;
            padding: 3px;
            > span {
              color: #85BDFE;
              transition: all 0.3s ease-in-out;
            }
            &:hover {
              > span {
                color: #4993FF;
              }
            }
          }

          &:hover {
            background: rgba(255,255,255,0.4);
            > .ant-tabs-tab-btn {
              color: #4993FF;
            }
          }

          &.ant-tabs-tab-active {
            background: rgba(255,255,255,0.4);

            &:hover {
              background: rgba(255,255,255,0.6);
            }

            > .ant-tabs-tab-btn {
              color: #268CFF;
            }
          }
        }
      }

      /* 更多按钮 */
      > .ant-tabs-nav-operations > .ant-tabs-nav-more {
        ${flex('center')}
        color: #4993FF;
        font-size: 16px;
      }

      /* 工具列 */
      > .ant-tabs-extra-content {
        ${flex('center')}
        padding: 0 3px;
        height: 100%;
        border-left: 1px solid rgba(157, 203, 255, 0.3);
        
        > .pagebar-tabs-tools {
          > .btn {
            cursor: pointer;
            padding: 3px 8px;
            > span {
              color: #85BDFE;
              transition: all 0.3s ease-in-out;
            }
            &:hover {
              > span {
                color: #4993FF;
              }
            }
          }
        }
      }
    }
  }

  

  > .pagebar-tabs-popup-container {
    .ant-tabs-dropdown {
      /* display: block !important; */

      > .ant-tabs-dropdown-menu-root {
        background: rgba(54, 68, 91, 1);

        > .ant-tabs-dropdown-menu-item {
          color: #ccc;
          &:hover {
            color: #fff;
            background: rgba(38, 140, 255, 0.25);
          }

          > .ant-tabs-dropdown-menu-title-content {
            ${flex('space-between')}

            > .ant-tabs-dropdown-menu-item-remove {
              margin: 0;
              > span {
                color: #09accf;
                transition: all 0.3s ease-in-out;
              }
              &:hover {
                > span {
                  color: #0ed4ff;
                }
              }
            }
          }
        }
      }
    }
  }

  > .dropdown-popup-container {

    .ant-dropdown-menu {
      padding-top: 8px;
      padding-bottom: 8px;  
    }

    .ant-divider {
      margin: 6px 0;
    }
  }
`
